<html>
<head>
<title>MyHtml.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css" />
<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.structure.css" />
<link rel="stylesheet" href="colorpicker-master/jquery.colorpicker.css" />
<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.theme.css" />
<script type="text/javascript" src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="js/anyLine.js"></script>
<script type="text/javascript" src="colorpicker-master/jquery.colorpicker.js"></script>
<script type="text/javascript" src="colorpicker-master/parts/jquery.ui.colorpicker-rgbslider.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<style type="text/css">
* {
	font-family: '微软雅黑';
	font-size:14px;
}

canvas {
	border: 2px dashed gray;
}

.container_pencil{
	cursor: url(images/PencilToolCursor.gif), pointer;
}

.container_eraser{
	cursor: url(images/test.png), pointer;
}

.container_font{
	cursor:crosshair;
}
.speed {
	top: 15px;
}

.ui-selectmenu-text {
	font-size: 14px;
}

</style>
</head>

<body oncontextmenu="javascript:return false">

<div id="dialog" title="HTML画板">	
	<div> 
	   <fieldset style="float:left;">
	        <legend>工具</legend>
				<div id="toolsOptions">
					<input type="radio" id="tools_pencil" name="toolsOption" checked="checked"><label for="tools_pencil">画笔</label> &nbsp;
					<input type="radio" id="tools_eraser" name="toolsOption" ><label for="tools_eraser">橡皮擦</label> &nbsp;
					<input type="radio" id="tools_trash" name="toolsOption"><label 	for="tools_trash">清空</label>
					<div style="border-top:1px dashed gray;margin-top:8px;padding-top:8px;"><span>
						<button id="tools_save">save</button>&nbsp;&nbsp;&nbsp;
						<button id="tools_undo">undo</button>&nbsp;&nbsp;&nbsp;
						<button id="tools_redo">redo</button>
					</span></div>
				</div>

			</fieldset>
			<fieldset style="float:left;margin-left: 20px;">
				<legend>多边形</legend>
				<div><span>
					<input type="radio" id="tools_line" name="toolsOption"><label for="tools_line">直线</label>
					<input type="radio" id="tools_rotundity" name="toolsOption"><label for="tools_rotundity">圆形</label>
					<input type="radio" id="tools_rectangle" name="toolsOption"><label for="tools_rectangle">矩形</label>
					<input type="radio" id="tools_circle" name="toolsOption"><label for="tools_circle">文字</label>
				</span></div>
				<div style="border-top:1px dashed gray;margin-top:8px;padding-top:8px;">
				<span>边框色:<input id="colorpicker-popup" type="text"  value="000000" style="width: 72px;display:none; "></span>&nbsp;
	            <span>文字颜色:<input id="colorpicker-popup2" type="text"  value="fe9810" style="width: 72px;display:none; "></span>
			</fieldset>

			
	     <div style="clear:both;"></div>
	</div>
   
   <div style="background:white;position:relative;margin-top: 15px" id="container">
     <div id="temp" style="border:1px solid gray;width:1px;height:1px;position:absolute;display:none;"></div>
	
	<canvas id="myCanvas" width="960" height="400" class="container_pencil" style="position: absolute;top: 1px;left: 1px;background: #FFF">
	  
	</canvas>
	<canvas id="myCanvas1" width="960" height="400" class="container_pencil" style="position: absolute;top: 1px;left: 1px;">
		
	</canvas>
	</div>
<span id="show" style="display:none;"></span>

</div>	
</body>
</html>
